import React, { Component } from "react";
import { NavBar, Flex } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import './Category.scss'
import { withRouter } from "react-router-dom";
import myaxios from "../../utils/myaxios";
class Category extends Component {
    state = {
        cgList: [],
        active: 0,
    }
    componentDidMount() {
        myaxios.get('https://www.linweiqin.cn/api/public/v1/categories').then(res => {
            this.setState({
                cgList: res
            })
        })
    }
    render() {
        return (
            <div className="cg-index">
                {/* 分类导航条开始 */}
                <div className="cg-index-nav" >
                    <NavBar className="index-nav">商品分类</NavBar>
                </div>
                {/* 分类导航条结束 */}
                {/* 分类搜索框开始 */}
                <SearchInput></SearchInput>
                {/* 分类搜索框结束 */}
                {/* 分类列表开始 */}
                <Flex className='cg-index-main'>
                    {/* 分页列表左侧开始 */}
                    <div className='cg-list'>
                        {this.state.cgList.map(v => {
                            return (
                                <div key={v.cat_id} className='cg-list-item'>{v.cat_name}</div>
                            )
                        })}
                    </div>
                    {/* 分页列表左侧结束 */}
                    <Flex.Item>
                        {/* 分页列表右侧侧开始 */}
                        {this.state.cgList.map((v, i) => {
                            if (i === this.state.active) {
                                {
                                    return v.children.map(vv => {
                                        return (
                                            <div className='cg-list-items' key={vv.cat_id}>
                                                <div className='cg-list-item-title' key={vv.cat_id}>
                                                    {vv.cat_name}
                                                </div>
                                                <ul className='cg-list-item-con'>
                                                    {
                                                        vv.children.map(vvv => {
                                                            return (
                                                                <li className='cg-list-item-cons' key={vvv.car_id}>
                                                                    <img className='cg-list-item-cons-img' style={{ width: '5px' }} key={vvv.car_icon} src={vvv.cat_icon} alt="" />
                                                                    <p className='cg-list-item-cons-text' key={vvv.car_name}>
                                                                        {vvv.cat_name}
                                                                    </p>
                                                                </li>
                                                            )
                                                        })
                                                    }
                                                </ul>
                                            </div>
                                        )
                                    })
                                }
                            }
                        })}
                        {/* 分页列表右侧侧结束 */}
                    </Flex.Item>
                </Flex>
                {/* 分类列表结束 */}
            </div>
        )
    }
}
export default withRouter(Category)